<template>
	<div class="main-wrapper">
         <div class="main-div">
            <h3 class="main-title">收益汇总</h3>
            <div class="main-content">
                <div class="main-list">
                    <h3><label>平台总收益</label><span>{{money.winlose | division}}</span></h3>
                    <ul>
                        <li>
                            <label>今日总收益</label>
                            <span>{{money.todaywinlose | division}}</span>
                        </li>
                        <li>
                            <label>昨日总收益</label>
                            <span>{{money.yesterdaywinlose | division}}</span>
                        </li>
                    </ul>
                </div>
            </div>
         </div>
        <div class="main-div">
            <h3 class="main-title">金额汇总</h3>
            <div class="main-content">
                <div class="main-list">
                    <h3><label>总提现金额</label><span>{{money.withdrawl | division}}</span></h3>
                    <ul>
                        <li>
                            <label>今日提现金额</label>
                            <span>{{money.todaywithdrawl | division}}</span>
                        </li>
                        <li>
                            <label>昨日提现金额</label>
                            <span>{{money.yesterdaywithdrawl | division}}</span>
                        </li>
                    </ul>
                </div>
                <div class="main-list">
                    <h3><label>总充值金额</label><span>{{money.recharge | division}}</span></h3>
                    <ul>
                        <li>
                            <label>今日充值金额</label>
                            <span>{{money.todayrecharge | division}}</span>
                        </li>
                        <li>
                            <label>昨日充值金额</label>
                            <span>{{money.yesterdayrecharge | division}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main-div">
            <h3 class="main-title">人数汇总</h3>
            <div class="main-content">
                <div class="main-list">
                    <h3><label>代理总人数</label><span>{{money.agentcount}}</span></h3>
                </div>
                <div class="main-list">
                    <h3><label>总充值人数</label><span>{{money.rechargecount}}</span></h3>
                    <ul>
                        <li>
                            <label>今日充值人数</label>
                            <span>{{money.todayrechargecount}}</span>
                        </li>
                        <li>
                            <label>昨日充值人数</label>
                            <span>{{money.yesterdayrechargecount}}</span>
                        </li>
                    </ul>
                </div>
                <div class="main-list">
                    <h3><label>总注册人数</label><span>{{money.registercount}}</span></h3>
                    <ul>
                        <li>
                            <label>今日注册人数</label>
                            <span>{{money.todayregistercount}}</span>
                        </li>
                        <li>
                            <label>昨日注册人数</label>
                            <span>{{money.yesterdayregistercount}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
	</div>

</template>

<script>
    import ElFormItem from "element-ui/packages/form/src/form-item";

    export default {
        components: {ElFormItem},
        data() {
            return {
                money:{}
            }
        },
        created(){
            this.getData()
            window.timer = setInterval(()=>{
                this.getData()
            },5000)
        },
        methods:{
            getData(){
                this.$axios.get('/dashboard',{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        this.money = res.data
                    }
                })
            }
        }

    }

</script>
<style scoped lang="stylus">
  .main-wrapper
    padding-top:20px
    padding-left:40px
    display flex
    flex-wrap wrap
    .main-div
      flex 0 0 230px
      margin-right:100px
      .main-title
        width: 100%
        text-align center
        font-size:18px
        color:#101010
        line-height 40px
        padding-bottom 10px
      .main-content
        width:100%
        height: 406px;
        background: #e6e6e6
        padding:20px 10px
        .main-list
          &>h3
            display flex
            font-size: 16px
            color:#101010
            justify-content space-between
            padding:0 10px
            background: #fff
            line-height:30px
            margin:0
          &>ul
            list-style: none
            padding:0
            margin:10px 0
            &>li
              display flex
              justify-content space-between
              padding:0 15px
              font-size:14px
              color:#101010
              line-height:24px
              &>label
                flex 0 0 100px
</style>
